<template>
    <div class="mainDiv" style="color:#000">
        <div class="rowHead">
            <span class="spanHead">当期跨店消费详细</span>
            <el-date-picker class="w300" v-model="times" type="daterange" align="right" placeholder="选择日期范围（默认当天日期）" @change="getCrossShopList" :picker-options="timeArea">
            </el-date-picker>
        </div>
        <el-tabs tab-position="left" type="border-card" style="height: 100%">
            <el-tab-pane>
                <span slot="label"><i class="el-icon-date"></i> 其他店客户在本店消费详情</span>
                <el-tabs type="border-card">
                    <el-tab-pane label="合计信息">
                        <el-table :data="shopInfoList" height="100%">
                            <el-table-column prop="shopName" label="店名" width="180">
                            </el-table-column>
                            <el-table-column prop="czMoney" label="充值金额" width="180">
                            </el-table-column>
                            <el-table-column prop="receMoney" label="现金消费（含充值）" width="180">
                            </el-table-column>
                            <el-table-column prop="cardReduce" label="卡耗消费">
                            </el-table-column>
                            <el-table-column prop="useBalance" label="余额消费">
                            </el-table-column>
                            <el-table-column prop="useGiftBalance" label="赠送余额消费">
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                    <el-tab-pane label="单据明细">
                        <div class="mainDiv">
                            <div>
                                <el-select v-model="oFilter.shopId" @change="getOtherShopGuestOrder">
                                    <el-option label="请选择分店" :value="0"></el-option>
                                    <el-option v-for="item in shopList" :label="item.name" :value="item.id"></el-option>
                                </el-select>
                                <el-select v-model="oFilter.orderType" @change="getOtherShopGuestOrder">
                                    <el-option label="请选择订单类型" :value="0"></el-option>
                                    <el-option label="开卡" :value="1"></el-option>
                                    <el-option label="开单" :value="2"></el-option>
                                    <el-option label="充值" :value="3"></el-option>
                                </el-select>
                            </div>
                            <el-table :data="shopOrderList" height="100%">
                                <el-table-column prop="name" label="客户">
                                </el-table-column>
                                <el-table-column prop="shopname" label="所在店">
                                </el-table-column>
                                <el-table-column prop="order_sn" label="消费单号" width="170">
                                </el-table-column>
                                <el-table-column prop="ordertype" label="单据类型">
                                    <template slot-scope="scope">
                                        <Tags :typeValue="scope.row.ordertype" typeName="orderType"></Tags>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="recemoney" label="充值金额">
                                    <template slot-scope="scope" v-if="3 == scope.row.ordertype">
                                        {{scope.row.recemoney}}
                                    </template>
                                </el-table-column>
                                <el-table-column prop="receMoney" label="现金消费（含充值）" width="90">
                                    <template slot-scope="scope">
                                        {{scope.row.recemoney}}
                                    </template>
                                </el-table-column>
                                <el-table-column prop="cardreduce" label="卡耗消费">
                                </el-table-column>
                                <el-table-column prop="usebalance" label="余额消费">
                                </el-table-column>
                                <el-table-column prop="usegiftbalance" label="赠送余额消费">
                                </el-table-column>
                                <el-table-column prop="addtime" label="下单时间" width="100">
                                    <template slot-scope="scope">
                                        {{scope.row.addtime|dateTime}}
                                    </template>
                                </el-table-column>
                                <el-table-column prop="status" label="单据状态">
                                    <template slot-scope="scope">
                                        <Tags :typeValue="scope.row.status" typeName="orderStatus" :tagStyle="{color: '#fff'}"></Tags>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <el-pagination layout="prev, pager, next" :page-size="oFilter.limit" @current-change="currpage" :total="oFilter.total"></el-pagination>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </el-tab-pane>
            <el-tab-pane>
                <span slot="label"><i class="el-icon-date"></i> 本店客户到其他店消费详情</span>
                <el-tabs type="border-card">
                    <el-tab-pane label="合计信息">
                        <el-table :data="guestInfoList" height="100%">
                            <el-table-column prop="shopName" label="店名" width="180">
                            </el-table-column>
                            <el-table-column prop="czMoney" label="充值金额" width="180">
                            </el-table-column>
                            <el-table-column prop="receMoney" label="现金消费（含充值）" width="180">
                            </el-table-column>
                            <el-table-column prop="cardReduce" label="卡耗消费">
                            </el-table-column>
                            <el-table-column prop="useBalance" label="余额消费">
                            </el-table-column>
                            <el-table-column prop="useGiftBalance" label="赠送余额消费">
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                    <el-tab-pane label="单据明细">
                        <div class="mainDiv">
                            <div>
                                <el-select v-model="tFilter.shopId" @change="getGuestOrderInOtherShop">
                                    <el-option label="请选择分店" :value="0"></el-option>
                                    <el-option v-for="item in shopList" :label="item.name" :value="item.id"></el-option>
                                </el-select>
                                <el-select v-model="tFilter.orderType" @change="getGuestOrderInOtherShop">
                                    <el-option label="请选择订单类型" :value="0"></el-option>
                                    <el-option label="开卡" :value="1"></el-option>
                                    <el-option label="开单" :value="2"></el-option>
                                    <el-option label="充值" :value="3"></el-option>
                                </el-select>
                            </div>
                            <el-table :data="guestOrderList" height="100%">
                                <el-table-column prop="name" label="客户">
                                </el-table-column>
                                <el-table-column prop="shopname" label="所在店">
                                </el-table-column>
                                <el-table-column prop="order_sn" label="消费单号" width="170">
                                </el-table-column>
                                <el-table-column prop="ordertype" label="单据类型">
                                    <template slot-scope="scope">
                                        <Tags :typeValue="scope.row.ordertype" typeName="orderType"></Tags>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="recemoney" label="充值金额">
                                    <template slot-scope="scope" v-if="3 == scope.row.ordertype">
                                        {{scope.row.recemoney}}
                                    </template>
                                </el-table-column>
                                <el-table-column prop="receMoney" label="现金消费（含充值）" width="90">
                                    <template slot-scope="scope">
                                        {{scope.row.recemoney}}
                                    </template>
                                </el-table-column>
                                <el-table-column prop="cardreduce" label="卡耗消费">
                                </el-table-column>
                                <el-table-column prop="usebalance" label="余额消费">
                                </el-table-column>
                                <el-table-column prop="usegiftbalance" label="赠送余额消费">
                                </el-table-column>
                                <el-table-column prop="addtime" label="下单时间" width="100">
                                    <template slot-scope="scope">
                                        {{scope.row.addtime|dateTime}}
                                    </template>
                                </el-table-column>
                                <el-table-column prop="status" label="单据状态">
                                    <template slot-scope="scope">
                                        <Tags :typeValue="scope.row.status" typeName="orderStatus" :tagStyle="{color: '#fff'}"></Tags>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <el-pagination layout="prev, pager, next" :page-size="tFilter.limit" @current-change="tCurrpage" :total="tFilter.total"></el-pagination>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
import CrossShop from '#/src/shop/crossShop.js'
import Tags from '@/components/orderTags.vue'

export default {
    name: 'featList',
    data() {
        return {
            timeArea: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const td = new Date()
                        td.setHours(0)
                        td.setMinutes(0)
                        td.setSeconds(0)
                        td.setMilliseconds(0)
                        const start = new Date()
                        start.setTime(td.getTime() - 3600 * 1000 * 24 * 7)
                        picker.$emit('pick', [start, td])
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const td = new Date()
                        td.setHours(0)
                        td.setMinutes(0)
                        td.setSeconds(0)
                        td.setMilliseconds(0)
                        const start = new Date()
                        start.setTime(td.getTime() - 3600 * 1000 * 24 * 30)
                        picker.$emit('pick', [start, td])
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const td = new Date()
                        td.setHours(0)
                        td.setMinutes(0)
                        td.setSeconds(0)
                        td.setMilliseconds(0)
                        const start = new Date()
                        start.setTime(td.getTime() - 3600 * 1000 * 24 * 90)
                        picker.$emit('pick', [start, td])
                    }
                }]
            },
            shopInfoList: [],
            guestInfoList: [],
            shopOrderList: [],
            guestOrderList: [],
            oFilter: {
                page: 1,
                limit: 15,
                times: [new Date(), new Date()],
                shopId: 0,
                orderType: 0,
                total: 0
            },
            tFilter: {
                page: 1,
                limit: 15,
                times: [new Date(), new Date()],
                shopId: 0,
                orderType: 0,
                total: 0
            },
            times: [new Date(), new Date()],
            shopList: []
        }
    },
    methods: {
        // 获取总数据
        getCrossShopList: async function() {
            // times转义
            this.getOtherShopGuestOrder()
            this.getGuestOrderInOtherShop()
            this.shopInfoList = await CrossShop.getOtherShopGuestOrderInfo(this.changeFilter(this.oFilter))
            this.guestInfoList = await CrossShop.getGuestOrderInOtherShopInfo(this.changeFilter(this.tFilter))
        },
        // 切换分页
        currpage(val) {
            this.oFilter.page = val
            this.getOtherShopGuestOrder()
        },
        tCurrpage(val) {
            this.tFilter.page = val
            this.getGuestOrderInOtherShop()
        },
        // 获取其他店在本店消费信息
        async getOtherShopGuestOrder() {
            let data = await CrossShop.getOtherShopGuestOrder(this.changeFilter(this.oFilter))
            this.shopOrderList = data.data
            this.oFilter.total = data.count
        },
        // 获取本店客户在其他店消费信息
        async getGuestOrderInOtherShop() {
            let data = await CrossShop.getGuestOrderInOtherShop(this.changeFilter(this.tFilter))
            this.guestOrderList = data.data
            this.tFilter.total = data.count
        },
        // 转换filter
        changeFilter(filter) {
            let newFilter = Object.assign({}, filter)
            newFilter.times = JSON.stringify(this.times)
            return newFilter
        },
        // 获取分店列表
        async getOtherShopList() {
            this.shopList = await CrossShop.getOtherShopList()
        }
    },
    mounted: function() {
        this.getCrossShopList()
        this.getOtherShopList()
    },
    components: { Tags }
}
</script>
<style>
.el-tabs--left .el-tabs__content {
    height: 100%;
    box-sizing: border-box;
}

.el-tab-pane {
    height: 100%
}

.el-tabs--top {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.spanHead {
    font-size: 12px;
    font-weight: 900;
    margin-right: 20px;
    color: #fff;
    background-color: #6b89b5;
    border-radius: 3px;
    padding: 8px;
}
</style>